<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>使用正则表达式验证注册页面</title>
	<link rel="stylesheet" href="css/register.css">
</head>

<body>
<section id="register">
	<div><img src="images/logo.jpg" alt="logo" /><img src="images/banner.jpg" alt="banner" /></div>
	<h1 class="hr_1">新用户注册</h1>
	<form action="" method="post" name="myform">
		<dl>
			<dt>用户名：</dt>
			<dd><input id="user" type="text" /><div id="user_prompt">用户名由英文字母和数字组成的4-16位字符，以字母开头</div></dd>
		</dl>
		<dl>
			<dt>密码：</dt>
			<dd><input id="pwd" type="password"  /><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></dd>
		</dl>
		<dl>
			<dt>确认密码：</dt>
			<dd><input id="repwd" type="password"/><div id="repwd_prompt"></div></dd>
		</dl>
		<dl>
			<dt>电子邮箱：</dt>
			<dd><input id="email" type="text"/><div id="email_prompt"></div></dd>
		</dl>
		<dl>
			<dt>手机号码：</dt>
			<dd><input id="mobile" type="text" /><div id="mobile_prompt"></div></dd>
		</dl>
		<dl>
			<dt>生日：</dt>
			<dd><input id="birth" type="text"/><div id="birth_prompt"></div></dd>
		</dl>
		<dl>
			<dt>&nbsp;</dt>
			<dd><input name="" type="image" src="images/register.jpg" class="btn" /></dd>
		</dl>
  </form>
</section>
<script src="./js/jquery-1.12.4.js"></script>
<script>
	$(function(){
		// blur 丢失焦点
		$("#mobile").blur(function(){
			// 定义正则表达式 11 - 2 = 9
			// 15000000000  11 位   888 666 
			// checkMobile(this);  // this 原生js对象
			var pattern = /^1[3|5|6|7|8|9]\d{9}$/;
			checkCommon(this,pattern,"您输入的手机号有误！！！！！！！")
		})

		// function checkMobile(obj){
		// 	var reg = /^1[3|5|6|7|8|9]\d{9}$/;
		// 	let mobile = $(obj).val();  // $(obj) jquery对象
		// 	if(reg.test(mobile) == false){
		// 		$("#mobile_prompt").text("您输入的手机号格式不正确");
		// 		return false;
		// 	} else {
		// 		$("#mobile_prompt").text("");
		// 		return true;
		// 	}
		// }


		// blur 丢失焦点
		$("#birth").blur(function(){
			//checkBirth(this);
			let pattern = /^19\d{2}|20[0-1][0-6]$/;
			checkCommon(this,pattern,"您输入的日期有误！！！！！！！")
		})

		// function checkBirth(obj){
		// 	var reg = /^19\d{2}|20[0-1][0-6]$/;
		// 	let birth = $(obj).val();
		// 	if(reg.test(birth) == false){
		// 		$("#birth_prompt").text("您输入的年份格式不正确");
		// 		return false;
		// 	} else {
		// 		$("#birth_prompt").text("");
		// 		return true;
		// 	}
		// }


		// plus版本  通用校验函数封装
		function checkCommon(obj,pattern,msg){
			var reg = pattern;
			let value = $(obj).val();
			if(reg.test(value) == false){
				$(obj).next().text(msg);
				return false;
			} else {
				$(obj).next().text("");
				return true;
			}
		}



		$("form").submit(function(){
			
			// 复用函数
			let flag = checkMobile($("#mobile")[0]) && checkBirth($("#birth")[0]);
			return flag;
		})



	})
</script>
</body>
</html>
